<template>
  <div class="pages-wrap">
    <!-- 当前的分类页面 -->

    <div class="page">
      <app-header></app-header>

      <div class="navv">
        <div class="navlist" v-for="(item, index) in navlist" :key="item" :class="{ active: activeIndex == index }"
          @click="changNavAction(index)">
          {{ item }}
        </div>
      </div>

      <!-- 下方数据流 -->
      <div class="contentAll">
        <!-- 全部故事 -->
        <transition enter-active-class="slideIn" leave-active-class="slideOut" mode="out-in">
          <div class="item-content" v-if="activeIndex == 0">
            <scroll-view class="content" ref="scroll">
              <template v-if="!isLoad">

                <div class="itemlister" v-for="(item, index) in list1" :key="index">
                  <img class="item-img" :src="item.img" alt="">

                  <div class="location" v-cloak>
                    <span v-cloak class="span1">{{ item.city }}</span>
                    <span v-cloak class="span2">{{ item.title }}</span>
                  </div>
                  <div class="user_model" v-cloak>

                    <img class="avatar" :src="item.avatar
                    " alt="" v-cloak />
                    <span class="username" v-cloak>{{ item.username }}</span>
                    <i class="iconfont icon-dianzan" v-cloak></i>
                    <span class="likeygoodNum" v-cloak>{{ item.likeygoodNum }}</span>
                    <i class="iconfont icon-liaotian"></i>
                    <span>{{ item.commentNum }}</span>
                  </div>
                  <div class="type">{{ item.type }}</div>

                </div>
                <!-- <button @click="show = !show">按钮</button> -->
                <div>
                  <div class="tp">
                    <banner class="bar" />
                  </div>

                </div>
                <div>
                </div>
                <div class="itemlister" v-for="(item, index) in list2" :key="item.id">
                  <img class="item-img" :src="item.img" alt="">

                  <div class="location" v-cloak>
                    <span v-cloak class="span1">{{ item.city }}</span>
                    <span v-cloak class="span2">{{ item.title }}</span>
                  </div>
                  <div class="user_model" v-cloak>

                    <img class="avatar" :src="item.avatar
                    " alt="" v-cloak />
                    <span class="username" v-cloak>{{ item.username }}</span>
                    <i class="iconfont icon-dianzan" v-cloak></i>
                    <span class="likeygoodNum" v-cloak>{{ item.likeygoodNum }}</span>
                    <i class="iconfont icon-liaotian"></i>
                    <span>{{ item.commentNum }}</span>
                  </div>
                  <div class="type">{{ item.type }}</div>
                </div>





              </template>
            </scroll-view>
          </div>
        </transition>

        <!-- 民宿 -->
        <transition enter-active-class="slideIn" leave-active-class="slideOut" mode="out-in">
          <div class="item-content" v-if="activeIndex == 1">
            <scroll-view class="content" ref="scroll">
              <template v-if="!isLoad">
                <div class="itemlister" v-for="(item, index) in hotelList" :key="index" ref="itemdiv" type="hotelId"
                  v-cloak>
                  <img class="item-img" :src="item.picUrl" alt="" v-cloak />
                  <div class="location" v-cloak>
                    <i class="iconfont icon-dingwei" v-cloak></i>
                    <span v-cloak>{{ item.city }}</span>
                  </div>
                  <div class="offical" v-cloak>
                    <span v-cloak>{{ item.offical }}</span>
                  </div>
                  <div class="user_model" v-cloak>

                    <img class="avatar" :src="
                      item.owenerId.avatar
                        ? item.owenerId.avatar
                        : 'https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg'
                    " alt="" v-cloak />
                    <span class="username" v-cloak>{{ item.owenerId.username }}</span>
                    <i class="iconfont icon-dianzan" :class="{
                      dianzan:
                        likeygoodlist.filter(
                          (item22) => item22.hotelId === item._id
                        ).length > 0,
                    }" @click="lickygoodAction(item._id, index, likeygoodlist)" v-cloak></i>
                    <span class="likeygoodNum" :class="{
                      dianzan:
                        likeygoodlist.filter(
                          (item22) => item22.hotelId === item._id
                        ).length > 0,
                    }" v-cloak>{{ item.likeygoodNum }}</span>
                  </div>
                </div>
              </template>
            </scroll-view>
          </div>
        </transition>

        <!-- 景点 -->
        <transition enter-active-class="slideIn" leave-active-class="slideOut" mode="out-in">
          <div class="item-content" v-if="activeIndex == 2">
            <scroll-view class="content" ref="scroll">
              <template v-if="!isLoad">
                <div class="itemlister" v-for="(item, index) in sightList" :key="index" ref="itemdiv" type="hotelId">
                  <img class="item-img" :src="item.picUrl" alt="" />
                  <div class="location">
                    <i class="iconfont icon-dingwei"></i>
                    <span>{{ item.city }}</span>
                  </div>
                  <div class="offical">
                    <span>{{ item.offical }}</span>
                  </div>
                  <div class="user_model">

                    <img class="avatar" :src="
                      item.owenerId.avatar
                        ? item.owenerId.avatar
                        : 'https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg'
                    " alt="" />
                    <span class="username">{{ item.owenerId.username }}</span>
                    <i class="iconfont icon-dianzan" :class="{
                      dianzan:
                        likeygoodlist.filter(
                          (item22) => item22.hotelId === item._id
                        ).length > 0,
                    }" @click="lickygoodAction(item._id, index, likeygoodlist)"></i>
                    <span class="likeygoodNum" :class="{
                      dianzan:
                        likeygoodlist.filter(
                          (item22) => item22.hotelId === item._id
                        ).length > 0,
                    }">{{ item.likeygoodNum }}</span>
                  </div>
                </div>


              </template>
            </scroll-view>
          </div>
        </transition>

        <!-- 美食 -->
        <transition enter-active-class="slideIn" leave-active-class="slideOut" mode="out-in">
          <div class="item-content" v-if="activeIndex == 3">
            <scroll-view class="content" ref="scroll">
              <template v-if="!isLoad">
                <div class="itemlister" v-for="(item, index) in foodList" :key="index" ref="itemdiv" type="hotelId">
                  <img class="item-img" :src="item.picUrl" alt="" />
                  <div class="location">
                    <i class="iconfont icon-dingwei"></i>
                    <span>{{ item.city }}</span>
                  </div>
                  <div class="offical">
                    <span>{{ item.offical }}</span>
                  </div>
                  <div class="user_model">

                    <img class="avatar" :src="
                      item.owenerId.avatar
                        ? item.owenerId.avatar
                        : 'https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg'
                    " alt="" />
                    <span class="username">{{ item.owenerId.username }}</span>
                    <i class="iconfont icon-dianzan" :class="{
                      dianzan:
                        likeygoodlist.filter(
                          (item22) => item22.hotelId === item._id
                        ).length > 0,
                    }" @click="lickygoodAction(item._id, index, likeygoodlist)"></i>
                    <span class="likeygoodNum" :class="{
                      dianzan:
                        likeygoodlist.filter(
                          (item22) => item22.hotelId === item._id
                        ).length > 0,
                    }">{{ item.likeygoodNum }}</span>
                  </div>
                </div>
              </template>
            </scroll-view>
          </div>
        </transition>

        <!-- 出去嗨 -->
        <transition enter-active-class="slideIn" leave-active-class="slideOut" mode="out-in">
          <div class="item-content" v-if="activeIndex == 4">
            <scroll-view class="content" ref="scroll">
              <template v-if="!isLoad">
                <div class="itemlister" v-for="(item, index) in haiList" :key="index" ref="itemdiv" type="hotelId">
                  <img class="item-img" :src="item.picUrl" alt="" />
                  <div class="location">
                    <i class="iconfont icon-dingwei"></i>
                    <span>{{ item.city }}</span>
                  </div>
                  <div class="offical">
                    <span>{{ item.offical }}</span>
                  </div>
                  <div class="user_model">

                    <img class="avatar" :src="
                      item.owenerId.avatar
                        ? item.owenerId.avatar
                        : 'https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg'
                    " alt="" />
                    <span class="username">{{ item.owenerId.username }}</span>
                    <i class="iconfont icon-dianzan" :class="{
                      dianzan:
                        likeygoodlist.filter(
                          (item22) => item22.hotelId === item._id
                        ).length > 0,
                    }" @click="lickygoodAction(item._id, index, likeygoodlist)"></i>
                    <span class="likeygoodNum" :class="{
                      dianzan:
                        likeygoodlist.filter(
                          (item22) => item22.hotelId === item._id
                        ).length > 0,
                    }">{{ item.likeygoodNum }}</span>
                  </div>
                </div>
              </template>
            </scroll-view>
          </div>
        </transition>
      </div>


    </div>
    //下一级页面
    <transition enter-active-class="slideIn" leave-active-class="slideOut">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { nextTick } from "vue";
import { mapState } from "vuex";
import Banner from './com/Banner.vue'
export default {
  name: "spot-page",
  components: {
    [Banner.name]: Banner,
  },
  data() {
    return {
      navlist: ["全部故事", "民宿", "景点", "美食", "出去嗨"],
      list1: [
        {
          img: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u450.png",
          city: "上海",
          title: "单位iu胡丢和我i等会我i的vvvvvvv从",
          avatar: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg",
          username: "zero",
          likeygoodNum: 44,
          commentNum: 23,
          type: "民宿"
        },
        {
          img: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u450.png",
          city: "上海",
          title: "单位iu胡丢和我i等会我i的vvvvvvv从",
          avatar: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg",
          username: "zero",
          likeygoodNum: 44,
          commentNum: 23,
          type: "民宿"
        },
        {
          img: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u450.png",
          city: "上海",
          title: "单位iu胡丢和我i等qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq会我i的vvvvvvv从",
          avatar: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg",
          username: "zero",
          likeygoodNum: 44,
          commentNum: 23,
          type: "民宿"
        },
        {
          img: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u450.png",
          city: "上海",
          title: "单位iu胡丢和我i等会我i的vvvvvvv从",
          avatar: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg",
          username: "zero",
          likeygoodNum: 44,
          commentNum: 23,
          type: "民宿"
        },

      ],
      list2: [
        {
          id: "a",
          img: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u450.png",
          city: "上海",
          title: "单位iu胡丢和我i等会我i的vvvvvvv从",
          avatar: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg",
          username: "zero",
          likeygoodNum: 44,
          commentNum: 23,
          type: "民宿"
        },
        {
          id: "b",

          img: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u450.png",
          city: "上海",
          title: "单位iu胡丢和我i等会我i的vvvvvvv从",
          avatar: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg",
          username: "zero",
          likeygoodNum: 44,
          commentNum: 23,
          type: "民宿"
        },
        {
          id: "c",

          img: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u450.png",
          city: "上海",
          title: "单位iu胡丢和我i等qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq会我i的vvvvvvv从",
          avatar: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg",
          username: "zero",
          likeygoodNum: 44,
          commentNum: 23,
          type: "民宿"
        },
        {
          id: "d",

          img: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u450.png",
          city: "上海",
          title: "单位iu胡丢和我i等会我i的vvvvvvv从",
          avatar: "https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E9%A6%96%E9%A1%B5/u285.svg",
          username: "zero",
          likeygoodNum: 44,
          commentNum: 23,
          type: "民宿"
        },

      ],
      show: true,
    };
  },
  computed: {
    ...mapState("spot", ["isLoad", "activeIndex", "num", "hotelList", "sightList", "foodList", "haiList"]),
    ...mapState("likeygood", ["likeygoodlist"]),
  },
  created() {
    //调用仓库中模块请求数据的方法
    // this.$store.dispatch(
    //   "spot/requestData",
    //   this.activeIndex
    // );
    this.$store.dispatch("spot/changeActiveIndex", 0);
    // this.$store.dispatch("likeygood/requestData");
  },
  mounted() {
    const scroll =
      this.$refs.scroll /*scrollview组件*/
        .scroll; /*scrollview组件内部的scroll属性对应的是iscroll对象*/

    scroll.on("scrollEnd", () => {
      // console.log(scroll.y, scroll.maxScrollY);
      if (scroll.y === scroll.maxScrollY) {
        //请求推荐的商品列表，请求一次后就关闭
        this.$store.dispatch("spot/morehotelList");

        // console.log("到了最底部");
      }
    });

    this.$store.dispatch("likeygood/requestData");
  },
  methods: {
    // 切换导航
    changNavAction(index) {
      this.$store.dispatch("spot/changeActiveIndex", index);
      this.$nextTick(() => {
        const scroll =
          this.$refs.scroll /*scrollview组件*/
            .scroll; /*scrollview组件内部的scroll属性对应的是iscroll对象*/

        scroll.on("scrollEnd", () => {
          // console.log(scroll.y, scroll.maxScrollY);
          if (scroll.y === scroll.maxScrollY) {
            //请求推荐的商品列表，请求一次后就关闭
            // console.log("到了最底部");
            this.$store.dispatch("spot/morehotelList");
          }
        });
      });
    },
    // 点赞功能
    lickygoodAction(_id, index, likeygoodlist) {
      const typer = this.$refs.itemdiv[index].getAttribute("type");
      let addlist = {};
      addlist[typer] = _id;
      // 取消点赞
      if (likeygoodlist.filter((item22) => item22.hotelId === _id).length > 0) {
        this.$store.dispatch("likeygood/deleteLikeyGood", addlist);
        return
      }
      // console.log(123);
      this.$store.dispatch("likeygood/addLikeyGood", addlist);
      // this.$options.computed.likeyornot()
    },
  },
  watch: {},
  activated() {
    console.log("activated激活了 ");
    const scroll =
      this.$refs.scroll /*scrollview组件*/
        .scroll; /*scrollview组件内部的scroll属性对应的是iscroll对象*/

    scroll.on("scrollEnd", () => {
      // console.log(scroll.y, scroll.maxScrollY);
      if (scroll.y === scroll.maxScrollY) {
        // console.log("到了最底部");
        this.$store.dispatch("spot/morehotelList");
      }
    });
  },
};
</script>

<style lang="scss"  scoped>
@function vw($px) {
  @return ($px/375) * 100vw;
}

[v-cloak] {
  display: none !important;
}

.slideOut {
  animation: slideOut 10ms;
}

.slideIn {
  animation: slideIn 300ms;
}

.bar {
  width: 90%;
}

.page {
  padding-top: vw(60);
  display: flex;
  flex-direction: column;

  .box {
    width: 100%;
  }

  .navv {
    display: flex;
    width: 100%;
    justify-content: space-around;
    height: 100%;
    align-items: center;

    .navlist {
      font-size: vw(14);
      color: #b3b4c7;
      padding: vw(18);
      position: relative;
      background-color: #fff;

      &.active::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 4px;
        background: #f66;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    width: 100%;
    height: vw(50);
  }



  .contentAll {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .item-content {
      height: 100%;
      width: 100%;
      position: relative;

      // 滚动视图
      .content {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        overflow: hidden;
        padding-top: vw(10);

        ::v-deep .scroll-wrap {
          display: grid;
          grid-template-columns: repeat(2, 50vw);

          .tp {
            width: 200%;
            display: block;
            display: flex;
            justify-content: center;
          }

          .itemlister {
            display: flex;
            flex-direction: column;
            width: vw(157);
            border: 1px solid #ccc;
            border-radius: vw(10);
            margin: vw(5) auto;
            position: relative;

            .item-img {
              width: vw(157);
            }

            .type {
              position: absolute;
              right: vw(10);
              background-color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: vw(3);
              width: vw(30);
              height: vw(20);
              bottom: vw(60);
            }

            span {
              display: inline-block;
            }

            .location {
              display: flex;
              width: 100%;
              padding-left: vw(6);
              box-sizing: border-box;

              .span1 {
                font-weight: bold;

              }

              .span2 {
                width: vw(105);
                height: vw(24);
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }

            .user_model {
              display: flex;
              align-items: center;

              .avatar {
                width: vw(19);
                height: vw(20);
                margin: vw(5);
              }

              .username {
                flex: 1;
              }

              .icon-dianzan,
              .likeygoodNum {
                margin: vw(3);

                &.dianzan {
                  color: #f66;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>  